<template>
  <view class="my-5 text-#1C213E font-bold">
    <view class="w-full text-left text-18px">{{ title }}</view>
    <view class="w-full h-full bg-#FFFFFF rounded-xl py-3 mt-3">
      <view class="grid grid-cols-4 gap-y-5">
        <view
          v-for="(it, index) in props.data"
          :key="index"
          class="flex justify-center items-center flex-col"
          @click="navigateTo(it.path)"
        >
          <view>
            <image :src="$getImageUrl(`icon/icon_${type}_${index+1}.png`)" class="w-100rpx h-100rpx" />
          </view>
          <view class="text-14px pt-2">
            {{ it.label }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    data: Record<string, any>[];
    title: string;
    type?: string;
  }>(),
  { },
)

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  })
}
</script>

<style scoped lang="scss">
.line {
  transform: rotate(90deg);
}
</style>
